<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3 响应式设计</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 20px;
            color: #333;
        }
        h1 {
            color: #0066cc;
            border-bottom: 2px solid #0066cc;
            padding-bottom: 10px;
        }
        h2 {
            color: #0099cc;
            margin-top: 30px;
        }
        h3 {
            color: #00aadd;
        }
        .example {
            background-color: #f5f5f5;
            border-left: 4px solid #0066cc;
            padding: 15px;
            margin: 20px 0;
            border-radius: 0 4px 4px 0;
        }
        .code {
            background-color: #f8f8f8;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 15px;
            margin: 15px 0;
            overflow-x: auto;
            font-family: Consolas, Monaco, 'Andale Mono', monospace;
        }
        .note {
            background-color: #ffffd9;
            border-left: 4px solid #ffcc00;
            padding: 15px;
            margin: 20px 0;
            border-radius: 0 4px 4px 0;
        }
        .preview {
            border: 1px solid #ddd;
            padding: 20px;
            margin: 15px 0;
            border-radius: 4px;
            background-color: #fff;
        }
        table {
            border-collapse: collapse;
            width: 100%;
            margin: 20px 0;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px 12px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
        nav {
            background-color: #f8f8f8;
            padding: 10px;
            margin-bottom: 20px;
            border-radius: 4px;
        }
        nav a {
            margin-right: 15px;
            text-decoration: none;
            color: #0066cc;
        }
        nav a:hover {
            text-decoration: underline;
        }
        /* 演示用样式 */
        .responsive-demo {
            margin: 20px 0;
            border: 1px solid #ddd;
            padding: 20px;
            border-radius: 4px;
        }
        .responsive-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 15px;
        }
        .responsive-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            margin-bottom: 20px;
        }
        .responsive-item {
            background-color: #0099cc;
            color: white;
            padding: 20px;
            text-align: center;
            border-radius: 4px;
        }
        .responsive-flex {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin-bottom: 20px;
        }
        .responsive-flex-item {
            flex: 1 1 200px;
            background-color: #0099cc;
            color: white;
            padding: 20px;
            text-align: center;
            border-radius: 4px;
        }
        .responsive-image {
            max-width: 100%;
            height: auto;
            display: block;
            margin: 0 auto;
        }
        .responsive-table-container {
            overflow-x: auto;
        }
        .responsive-font {
            font-size: calc(16px + 1vw);
            margin-bottom: 20px;
        }
        /* 媒体查询演示 */
        @media (max-width: 992px) {
            .responsive-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }
        @media (max-width: 768px) {
            .responsive-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        @media (max-width: 576px) {
            .responsive-grid {
                grid-template-columns: 1fr;
            }
        }
        /* 打印样式演示 */
        @media print {
            body {
                font-size: 12pt;
                line-height: 1.5;
                color: #000;
                background: #fff;
            }
            nav, .example, .code, .note {
                display: none;
            }
            h1, h2, h3 {
                page-break-after: avoid;
            }
            img {
                max-width: 100% !important;
            }
            @page {
                margin: 2cm;
            }
        }
    </style>
</head>
<body>
    <nav>
        <a href="index.html">首页</a>
        <a href="css3-selectors.html">CSS选择器</a>
        <a href="css3-box-model.html">盒模型</a>
        <a href="css3-layout-flexbox.html">Flexbox布局</a>
        <a href="css3-layout-grid.html">Grid布局</a>
        <a href="css3-colors-gradients.html">颜色与渐变</a>
        <a href="css3-transforms.html">变换</a>
        <a href="css3-transitions-animations.html">过渡与动画</a>
        <a href="css3-responsive.html">响应式设计</a>
    </nav>

    <h1>CSS3 响应式设计</h1>
    
    <section>
        <h2>响应式设计概述</h2>
        <div class="example">
            <p>响应式网页设计（Responsive Web Design，RWD）是一种网页设计方法，使网页能够自动适应不同设备和屏幕尺寸，提供最佳的浏览体验。</p>
            
            <p>响应式设计的核心原则：</p>
            <ul>
                <li><strong>流动布局</strong>：使用相对单位（如百分比、em、rem）而不是固定单位（如像素）</li>
                <li><strong>灵活的图像和媒体</strong>：确保图像和视频能够缩放以适应不同屏幕</li>
                <li><strong>媒体查询</strong>：根据设备特性（如屏幕宽度）应用不同的样式</li>
                <li><strong>移动优先</strong>：先为移动设备设计，然后逐步增强桌面体验</li>
            </ul>
        </div>
        
        <div class="note">
            <p><strong>为什么需要响应式设计？</strong> 随着移动设备使用的增加，网站必须在各种屏幕尺寸上提供良好的用户体验。响应式设计允许使用单一代码库为所有设备提供优化的体验，而不必为每种设备类型创建单独的网站。</p>
        </div>
    </section>
    
    <section>
        <h2>视口设置</h2>
        <div class="example">
            <p>视口（Viewport）是浏览器窗口中显示网页内容的区域。在响应式设计中，正确设置视口是第一步。</p>
            
            <h3>视口元标记</h3>
            <div class="code">
                &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
            </div>
            <p>这个元标记告诉浏览器：</p>
            <ul>
                <li><code>width=device-width</code>：将视口宽度设置为设备的宽度</li>
                <li><code>initial-scale=1.0</code>：设置初始缩放级别为 1.0（不缩放）</li>
            </ul>
            
            <h3>其他视口设置选项</h3>
            <div class="code">
                &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"&gt;
            </div>
            <p>额外选项：</p>
            <ul>
                <li><code>maximum-scale</code>：允许的最大缩放级别</li>
                <li><code>minimum-scale</code>：允许的最小缩放级别</li>
                <li><code>user-scalable</code>：是否允许用户缩放页面</li>
            </ul>
        </div>
        
        <div class="note">
            <p><strong>可访问性注意事项：</strong> 通常不建议使用 <code>user-scalable=no</code>，因为这会阻止用户根据自己的需求缩放页面，可能会影响可访问性。</p>
        </div>
    </section>
    
    <section>
        <h2>流动布局与相对单位</h2>
        <div class="example">
            <p>流动布局使用相对单位，允许元素相对于其父元素或视口调整大小。</p>
            
            <h3>相对长度单位</h3>
            <div class="code">
                /* 相对于父元素的字体大小 */
                font-size: 1.2em;       /* 1.2 倍父元素的字体大小 */
                
                /* 相对于根元素的字体大小 */
                font-size: 1.2rem;      /* 1.2 倍根元素的字体大小 */
                
                /* 相对于视口宽度 */
                width: 50vw;            /* 视口宽度的 50% */
                
                /* 相对于视口高度 */
                height: 50vh;           /* 视口高度的 50% */
                
                /* 相对于视口较小的那个维度 */
                font-size: 5vmin;       /* 视口较小维度的 5% */
                
                /* 相对于视口较大的那个维度 */
                font-size: 5vmax;       /* 视口较大维度的 5% */
                
                /* 百分比 */
                width: 100%;            /* 父元素宽度的 100% */
                max-width: 1200px;      /* 最大宽度限制 */
            </div>
            
            <h3>流动容器</h3>
            <div class="code">
                .container {
                    width: 100%;
                    max-width: 1200px;   /* 在大屏幕上限制最大宽度 */
                    margin: 0 auto;      /* 水平居中 */
                    padding: 0 15px;     /* 在小屏幕上提供一些边距 */
                }
            </div>
            
            <div class="responsive-demo">
                <div class="responsive-container">
                    <p>这是一个流动容器示例。尝试调整浏览器窗口大小，观察容器如何响应。</p>
                    <div class="responsive-item">内容</div>
                </div>
            </div>
            
            <h3>响应式字体大小</h3>
            <div class="code">
                /* 使用 rem 单位 */
                html {
                    font-size: 16px;     /* 基础字体大小 */
                }
                h1 {
                    font-size: 2rem;      /* 32px */
                }
                
                /* 使用视口单位 */
                h1 {
                    font-size: 5vw;       /* 视口宽度的 5% */
                }
                
                /* 使用 calc() 和视口单位创建流动但有限制的字体大小 */
                h1 {
                    font-size: calc(18px + 2vw);  /* 基础大小 + 流动部分 */
                }
                
                /* 使用媒体查询调整基础字体大小 */
                @media (max-width: 768px) {
                    html {
                        font-size: 14px;  /* 在小屏幕上减小基础字体大小 */
                    }
                }
            </div>
            
            <div class="responsive-demo">
                <div class="responsive-font">这是一个响应式字体大小示例 (calc(16px + 1vw))</div>
            </div>
        </div>
        
        <div class="note">
            <p><strong>rem vs. em：</strong> rem 单位相对于根元素（html）的字体大小，而 em 单位相对于父元素的字体大小。rem 通常更容易管理，因为它们不会级联（不会受到嵌套元素的影响）。</p>
        </div>
    </section>
    
    <section>
        <h2>媒体查询</h2>
        <div class="example">
            <p>媒体查询允许根据设备特性（如屏幕宽度、高度、方向等）应用不同的样式。</p>
            
            <h3>基本语法</h3>
            <div class="code">
                @media media-type and (media-feature) {
                    /* CSS 规则 */
                }
            </div>
            
            <h3>媒体类型</h3>
            <ul>
                <li><code>all</code>：所有设备（默认值）</li>
                <li><code>screen</code>：屏幕设备（计算机、平板、手机等）</li>
                <li><code>print</code>：打印预览模式/打印页面</li>
                <li><code>speech</code>：屏幕阅读器</li>
            </ul>
            
            <h3>常用媒体特性</h3>
            <div class="code">
                /* 基于视口宽度 */
                @media (min-width: 768px) { ... }    /* 当视口宽度 >= 768px 时应用 */
                @media (max-width: 767px) { ... }    /* 当视口宽度 <= 767px 时应用 */
                
                /* 基于视口高度 */
                @media (min-height: 600px) { ... }   /* 当视口高度 >= 600px 时应用 */
                
                /* 组合条件 */
                @media (min-width: 768px) and (max-width: 1199px) { ... }  /* 当宽度在 768px 和 1199px 之间时应用 */
                
                /* 多个查询 */
                @media (max-width: 767px), (orientation: portrait) { ... }  /* 当宽度 <= 767px 或设备为纵向时应用 */
                
                /* 设备方向 */
                @media (orientation: landscape) { ... }  /* 横向（宽度 > 高度）*/
                @media (orientation: portrait) { ... }   /* 纵向（高度 > 宽度）*/
                
                /* 显示质量 */
                @media (min-resolution: 2dppx) { ... }   /* 高 DPI 显示器（如视网膜显示屏）*/
                
                /* 暗色模式 */
                @media (prefers-color-scheme: dark) { ... }  /* 用户偏好暗色主题 */
                
                /* 减少动画 */
                @media (prefers-reduced-motion: reduce) { ... }  /* 用户偏好减少动画 */
            </div>
            
            <h3>常见断点</h3>
            <div class="code">
                /* 移动设备 */
                @media (max-width: 575px) { ... }
                
                /* 平板（纵向）*/
                @media (min-width: 576px) and (max-width: 767px) { ... }
                
                /* 平板（横向）和小型桌面 */
                @media (min-width: 768px) and (max-width: 991px) { ... }
                
                /* 中型桌面 */
                @media (min-width: 992px) and (max-width: 1199px) { ... }
                
                /* 大型桌面 */
                @media (min-width: 1200px) { ... }
            </div>
            
            <div class="responsive-demo">
                <h3>响应式网格示例</h3>
                <p>调整浏览器窗口大小，观察网格如何变化：</p>
                <div class="responsive-grid">
                    <div class="responsive-item">项目 1</div>
                    <div class="responsive-item">项目 2</div>
                    <div class="responsive-item">项目 3</div>
                    <div class="responsive-item">项目 4</div>
                </div>
                <p>断点：</p>
                <ul>
                    <li>大屏幕（> 992px）：4 列</li>
                    <li>中屏幕（768px - 992px）：3 列</li>
                    <li>小屏幕（576px - 768px）：2 列</li>
                    <li>超小屏幕（< 576px）：1 列</li>
                </ul>
            </div>
        </div>
        
        <div class="note">
            <p><strong>移动优先 vs. 桌面优先：</strong> 在移动优先方法中，基础样式针对移动设备，然后使用 <code>min-width</code> 媒体查询为更大的屏幕添加样式。在桌面优先方法中，基础样式针对桌面设备，然后使用 <code>max-width</code> 媒体查询为更小的屏幕调整样式。移动优先通常被认为是更好的实践，因为它符合渐进增强的原则。</p>
        </div>
    </section>
    
    <section>
        <h2>响应式图像</h2>
        <div class="example">
            <p>图像通常是网页上最大的资源，因此优化它们对于响应式设计至关重要。</p>
            
            <h3>基本响应式图像</h3>
            <div class="code">
                img {
                    max-width: 100%;    /* 确保图像不会超出其容器 */
                    height: auto;        /* 保持图像的原始比例 */
                }
            </div>
            
            <h3>使用 srcset 属性</h3>
            <div class="code">
                &lt;img src="small.jpg"
                     srcset="small.jpg 500w,
                             medium.jpg 1000w,
                             large.jpg 1500w"
                     sizes="(max-width: 600px) 100vw,
                            (max-width: 1200px) 50vw,
                            33vw"
                     alt="响应式图像示例"&gt;
            </div>
            <p>这个例子中：</p>
            <ul>
                <li><code>srcset</code> 定义了不同宽度的图像版本</li>
                <li><code>sizes</code> 告诉浏览器图像在不同视口宽度下将占用多少空间</li>
                <li>浏览器会自动选择最适合当前显示条件的图像</li>
            </ul>
            
            <h3>使用 picture 元素</h3>
            <div class="code">
                &lt;picture&gt;
                    &lt;source media="(max-width: 600px)" srcset="small.jpg"&gt;
                    &lt;source media="(max-width: 1200px)" srcset="medium.jpg"&gt;
                    &lt;img src="large.jpg" alt="响应式图像示例"&gt;
                &lt;/picture&gt;
            </div>
            <p><code>picture</code> 元素允许为不同的媒体条件指定不同的图像源。</p>
            
            <h3>使用 CSS 背景图像</h3>
            <div class="code">
                .hero {
                    background-image: url('large.jpg');
                    background-size: cover;     /* 覆盖整个容器 */
                    background-position: center; /* 居中图像 */
                }
                
                @media (max-width: 768px) {
                    .hero {
                        background-image: url('medium.jpg');
                    }
                }
                
                @media (max-width: 480px) {
                    .hero {
                        background-image: url('small.jpg');
                    }
                }
            </div>
        </div>
        
        <div class="note">
            <p><strong>图像优化：</strong> 除了使用响应式技术外，还应该优化图像文件大小。考虑使用现代格式（如 WebP），适当压缩图像，并使用延迟加载技术来提高性能。</p>
        </div>
    </section>
    
    <section>
        <h2>响应式布局技术</h2>
        <div class="example">
            <h3>Flexbox 布局</h3>
            <div class="code">
                .container {
                    display: flex;
                    flex-wrap: wrap;      /* 允许项目换行 */
                }
                
                .item {
                    flex: 1 1 300px;      /* 增长、收缩、基础宽度 */
                    margin: 10px;
                }
            </div>
            <p>Flexbox 非常适合一维布局（行或列），特别是当您不知道项目的确切大小时。</p>
            
            <div class="responsive-demo">
                <div class="responsive-flex">
                    <div class="responsive-flex-item">Flex 项目 1</div>
                    <div class="responsive-flex-item">Flex 项目 2</div>
                    <div class="responsive-flex-item">Flex 项目 3</div>
                    <div class="responsive-flex-item">Flex 项目 4</div>
                </div>
            </div>
            
            <h3>Grid 布局</h3>
            <div class="code">
                .container {
                    display: grid;
                    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
                    gap: 20px;
                }
            </div>
            <p>Grid 布局非常适合二维布局（行和列），特别是创建复杂的网格系统。</p>
            
            <h3>多列布局</h3>
            <div class="code">
                .content {
                    column-count: 3;      /* 在大屏幕上显示 3 列 */
                    column-gap: 2em;       /* 列间距 */
                }
                
                @media (max-width: 768px) {
                    .content {
                        column-count: 2;    /* 在中等屏幕上显示 2 列 */
                    }
                }
                
                @media (max-width: 480px) {
                    .content {
                        column-count: 1;    /* 在小屏幕上显示 1 列 */
                    }
                }
            </div>
            <p>多列布局适用于文本内容，如文章或博客文章。</p>
        </div>
    </section>
    
    <section>
        <h2>响应式表格</h2>
        <div class="example">
            <p>表格在小屏幕上通常很难处理，因为它们可能会溢出视口。</p>
            
            <h3>方法 1：水平滚动</h3>
            <div class="code">
                .table-container {
                    overflow-x: auto;    /* 允许水平滚动 */
                }
            </div>
            
            <div class="responsive-demo">
                <div class="responsive-table-container">
                    <table>
                        <thead>
                            <tr>
                                <th>标题 1</th>
                                <th>标题 2</th>
                                <th>标题 3</th>
                                <th>标题 4</th>
                                <th>标题 5</th>
                                <th>标题 6</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>数据 1</td>
                                <td>数据 2</td>
                                <td>数据 3</td>
                                <td>数据 4</td>
                                <td>数据 5</td>
                                <td>数据 6</td>
                            </tr>
                            <tr>
                                <td>数据 7</td>
                                <td>数据 8</td>
                                <td>数据 9</td>
                                <td>数据 10</td>
                                <td>数据 11</td>
                                <td>数据 12</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            
            <h3>方法 2：重新排列为卡片</h3>
            <div class="code">
                @media (max-width: 768px) {
                    table, thead, tbody, th, td, tr {
                        display: block;  /* 将所有表格元素显示为块级元素 */
                    }
                    
                    thead tr {
                        position: absolute;
                        top: -9999px;
                        left: -9999px;
                    }
                    
                    tr {
                        margin-bottom: 20px;
                        border: 1px solid #ddd;
                    }
                    
                    td {
                        position: relative;
                        padding-left: 50%;
                        text-align: left;
                    }
                    
                    td:before {
                        position: absolute;
                        left: 10px;
                        width: 45%;
                        font-weight: bold;
                        content: attr(data-label);  /* 使用自定义属性显示标题 */
                    }
                }
            </div>
            <p>这种方法需要在 HTML 中为每个单元格添加 <code>data-label</code> 属性：</p>
            <div class="code">
                &lt;td data-label="标题 1"&gt;数据 1&lt;/td&gt;
            </div>
        </div>
    </section>
    
    <section>
        <h2>响应式导航</h2>
        <div class="example">
            <h3>汉堡菜单</h3>
            <div class="code">
                /* HTML 结构 */
                &lt;nav class="responsive-nav"&gt;
                    &lt;button class="menu-toggle"&gt;☰&lt;/button&gt;
                    &lt;ul class="nav-menu"&gt;
                        &lt;li&gt;&lt;a href="#"&gt;首页&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;关于&lt;/a&gt;&lt;/li&gt;
                        &lt